<template>
  <div class="slide">
    <div
      v-for="(imgUrl, index) in imgList"
      v-show="index === mark"
      :key="index"
      class="slideshow"
    >
      <a href="#">
        <img :src="imgUrl"  />
      </a>
    </div>
    <div class="bar">
      <span
        v-for="(item, index) in imgList"
        :class="{ active: index === mark }"
        :key="index"
      ></span>
    </div>
  </div>
</template>

<script> 
import pic1 from '@/assets/img/picture1.jpg'
import pic2 from '@/assets/img/picture2.jpg'
import pic3 from '@/assets/img/picture3.jpg'
export default {  
 
  data () {  
   
    return {  
      mark: 0, //比对图片索引的变量
      imgList:[pic1,pic2,pic3]  ,
      
      
    }  
  },  
  methods: {  
    autoPlay () {  
      this.mark++;  
      if (this.mark === 3) { //当遍历到最后一张图片置零  
        this.mark = 0  
      }  
    },  
    play () {  
      setInterval(this.autoPlay, 2500)  
    },  
    change (i) {  
      this.mark = i  
    }  
  },  
  created () {  
    this.play()  
  }  
}  
</script> 
<style scoped>  
  .slide {  
    /* width: 950px;  
    height: 150px;  
    margin: 0 auto;  
    margin-top: 50px;  
    overflow: hidden;  
    position: relative;   */
    width:100%;
    height:450px;
    position: relative;
    background-color: red;
  }  
  .slideshow {  
    width: 100%;  
    height: 100%;  
  }  
  li {  
    position: absolute;  
  }  
  img {  
    width: 100%;  
    height: 100%;  
  }  
  .bar {  
    position: absolute;  
    width: 100%;  
    bottom: 10px;
    left:45%;  
    
  }  
  .bar span {  
    width: 20px;  
    height: 20px;  
    border: 1px solid; 
    border-radius: 50%; 
    background: white;  
    display: inline-block;  
    margin-right: 10px;  
  }  
  .active {  
    background: #bfa !important;  
  }  
</style>  
